<template>
	<view>
		<view class="topBox">
			<view class="top">
				<view class="go-back iconfont" @click="goback">
					&#xe602;
				</view>
				<view class="middle">
					<!-- 秀实—东雀嘉熠一号收益好转 -->
					{{productDetai.productName}}
				</view>
				<view class="share iconfont">
					<!-- &#xe634; -->
				</view>
			</view>
			<view class="second-box">
				<view class="second-title">
					<!-- 契约型私募基金 -->
					{{productDetai.productType}}
				</view>
				<view class="persent">{{yield}}</view>
				<view class="level">业绩比较基准</view>

			</view>
			<view class="class-box">
				<view class="class-item">
					<view class="class-item-top">发行规模</view>
					<view class="class-item-bottom">
						<!-- 12个月 -->
						{{productDetai.fScale}}
					</view>
				</view>
				<view class="class-item class-item-2">
					<view class="class-item-top">产品期限</view>
					<view class="class-item-bottom">
						{{productDetai.deadline}}
					</view>
				</view>
				<view class="class-item">
					<view class="class-item-top">认购起点</view>
					<view class="class-item-bottom">
						{{productDetai.perminBalance}}
					</view>
				</view>
			</view>
		</view>
		<view class="contentBox">
			<view class="content-item">
				<view class="content-left">管理人</view>
				<view class="content-right">{{productDetai.productManager}}</view>
			</view>
			<view class="content-item">
				<view class="content-left">托管人</view>
				<view class="content-right">{{productDetai.productCustodian}}</view>
			</view>
			<view class="content-item">
				<view class="content-left">外包服务商</view>
				<view class="content-right">{{productDetai.outSourcingServiceProvider}}</view>
			</view>
			<view class="content-item">
				<view class="content-left">分红方式</view>
				<view class="content-right">{{productDetai.cIncdisDate}}</view>
			</view>
			<view class="content-item">
				<view class="content-left">产品募集信息</view>
				<view class="content-right">
					<view class="right-item">
						账户名：{{productDetai.cRaiseName}}
					</view>
					<view class="right-item">
						账号：{{productDetai.cRaiseAcco}}
					</view>
					<view class="right-item">
						开户行：{{productDetai.kaiHuHang}}
					</view>
				</view>
			</view>
			<view class="content-item">
				<view class="content-left">产品投向</view>
				<view class="content-right">
					<view class="right-item">
						{{productDetai.cWayFund}}
					</view>
					
				</view>
			</view>
			<view class="content-item">
				<view class="content-left">风险收益特征</view>
				<view class="content-right">
					<view class="right-item">
						{{productDetai.riskIncome}}
					</view>
					
				</view>
			</view>
			<view class="content-item">
				<view class="content-left">风控措施</view>
				<view class="content-right">
					<view class="right-item">
						{{productDetai.cRiskControl}}
					</view>
					
				</view>
			</view>
		</view>
		<view class="file-box">
			<view class="file-content" @click="toEnclosure()">
				<view class="icon">
					<image class="icon-image" src="http://t.cn/EcTVWnT" mode=""></image>
				</view>
				<view class="file">
					附件
				</view>
			</view>
		</view>
		<view class="file-box ptop-0">
			<view class="empty_40"></view>
		</view>
		<view  class="btn appoint-btn" @click="toWodelicaishi" v-if="status != 3">预约</view>
		<view  class="btn appoint-btn ccc-btn" v-else>预约</view>
	</view>
</template>

<script>
	//引入全局变量
	import global_ from '../../../../components/tool/productGlobal'
	export default {
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			console.info("获取到的上一页参数。。。")
			console.log(JSON.stringify(option));
			console.log(option.projId); //打印出上个页面传递的参数。
			this.projId=option.projId;
			console.log('传过来的值？、、、、、'+this.projId);
			this.yield=option.yield;
			console.log("url===================="+this.url);
			this.getData();
		},
		data() {
			return {
				projId:'',
				status:uni.getStorageSync('product_status'),
				yield:'',//业绩比较基准(上一页传递而来)
				isSiMu:0  ,//是否是私募产品 0：私募产品，1：非私募产品
				productDetai:'',
				token:uni.getStorageSync('token_key'),
				loginRole:uni.getStorageSync('loginRole'),
				url:global_.api.PRODUCT_DETAIL_API
			};
		},
		methods: {
			goback() {
				uni.navigateBack();
			},
			getData(){
				uni.showNavigationBarLoading();
				uni.request({
				method: 'GET',
				url: this.url,
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					token: this.token,
					projId: this.projId
				},
			
				dataType: 'json',
				success: (res) => {
					var resultData = res.data;
					this.productDetai=res.data.data.productDetai;
					this.isSiMu=this.productDetai.isSiMu;
					//将此标志保存到缓存中
					uni.setStorageSync('isSiMu', this.isSiMu);
					uni.setStorageSync('projId', this.projId);     //用来传给附件的
					console.log("返回结果======="+JSON.stringify(resultData));
					console.log('什么呀？？？？？'+resultData);
			
				},
				fail: (res) => {
					console.log("..............................................fail");
					console.log(JSON.stringify(res));
					//this.text = 'request fail';
				},
				complete: (res) => {
					//停止当前页面下拉刷新。
					uni.hideNavigationBarLoading();
				}
			})},
			toProductDetail() {
				uni.navigateTo({
					url: './productDetail/productDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toWodelicaishi() {
				var proName = this.productDetai.productName
				uni.navigateTo({
					url: './simuYuyue/yuyue/yuyue?proj_id='+this.projId+"&proName="+proName,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toEnclosure(){     // 进入附件页面
				uni.navigateTo({
					url:'../../productYemian/fujianList',
					success: res =>{},
					fail: () => {},
					complete: () => {}
				})
			}
// 			toYuyueliucheng(){
// 				uni.navigateTo({
// 					url: './simuYuyue/simuYuyue',
// 					success: res => {},
// 					fail: () => {},
// 					complete: () => {}
// 				});
// 			}
		}
	}
</script>

<style>
	page {
		background: white;
	}

	.topBox {

		width: 100%;
		height: 450upx;
		background: url("http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.3-%E4%BA%A7%E5%93%81%E8%AF%A6%E6%83%85/android/drawable-xhdpi/peijing.png") center no-repeat;
		background-size: 100% 450upx;
	}

	.top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 67upx 30upx 0 37upx;
		color: rgb(255, 255, 255);
	}

	.middle {
		font-size: 18px;
	}

	.go-back {
		font-size: 17px;
	}

	.share {
		font-size: 20px;
	}

	.second-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		color: rgb(255, 255, 255);
		text-align: center;
	}

	.second-title {
		font-size: 12px;
		margin: 50upx 0 25upx;
	}

	.persent {
		height: 63upx;
		font-size: 32px;
		margin-bottom: 39upx;

	}

	.level {
		font-size: 12px;
	}

	.class-box {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		height: 120upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.05);
		margin: 38upx 20upx 0;
		align-items: center;
	}
	.class-item{
		flex: 1;
	}
	.class-item-2{
		border-right: 1px solid rgba(242,241,240,1);
		border-left: 1px solid rgba(242,241,240,1);
	}
	.class-item-top{
		color:rgba(51, 51, 51, 1);
		font-size: 15px;
		line-height: 40upx;
	}
	.class-item-bottom{
		color:rgba(187,187,187,1);
		font-size: 12px;
		line-height:30upx;
	}
	.contentBox{
		margin-top: 60upx;
		padding: 32upx 40upx;
	}
	.content-item{
		display: flex;
		flex-direction: row;
		margin: 30upx 0;
		
	}
	.content-left{
		width: 150upx;
		color:rgba(153,153,153,1);
		font-size: 12px;
	}
	.content-right{
		flex: 1;
		color:rgba(68,68,68,1);
	
	}
	.file-box{
		padding: 20upx 0;
		background: #f5f5f5;
	}
	.empty_40{
		width:100%;
		height: 40px;
	}
	.file-box.ptop-0{
		padding-top: 0;
	}
	.file-content{
		background: rgb(255,255,255);
		display: flex;
		flex-direction:row ;
		align-items: center;
		
		justify-content: center;
		height: 90upx;
		font-size: 15px;
		
	}
	.icon ,.icon-image{
		width: 36upx;
		height: 32upx;
		margin-right: 10upx;
	}
	.btn{
		height:90upx;
		line-height: 90upx;
		text-align: center;
		background: rgba(196,156,90,1);
		color: white;
		font-size: 17px;
	}
	.btn::after,.btn::before{
		
	}
	.appoint-btn{
		position: fixed;
		bottom:0;
		z-index: 9;
		width: 100%;
		text-align: center;
	}
	.ccc-btn{
		background:#ccc;
	}
</style>
